import React, { Component } from 'react'
// 我们要在这个demo中将受控组件转化为非受控组件
export default class Controlled extends Component {
    constructor() {
        super();
        // 状态管理
        this.state = {
            username: '',
            password: '',
        }

    }
    render() {
        return (
            <div>
                <h1>{this.state.username}</h1>
                <h1>{this.state.password}</h1>
                {/* 绑定事件对象e为stopSubmit方法*/}
                <form onSubmit={e => { this.stopSubmit(e) }}>
                    <div>
                        {/* htmlFor会指向dom节点 */}
                        <label htmlFor='username'>用户名:</label>
                        {/* 在输入框内绑定onChange事件 */}
                        <input type='text' id='username' name='username'
                            onChange={e => { this.getDate(e) }}
                            value={this.state.username} />
                    </div>
                    <div>
                        <label htmlFor='password'>密码:</label>
                        <input type='password' id='password' name='password'
                            onChange={e => { this.getDate(e) }}
                            value={this.state.password} />
                    </div>
                    <input type="submit" value="提交"
                        onClick={e => { this.submitData(e) }} />
                </form>
            </div>
        )
    }
    // 阻止默认事件
    stopSubmit(e) {
        // e是合成事件对象 target是合成事件对象中的属性
        console.log(e);
        // 操作事件对象阻止默认跳转
        e.preventDefault();
    }
    // 直接修改状态中的数据
    getDate(e) {
        // 修改state
        this.setState({
            // es6语法 把属性[]可以引用提前定义的变量
            // 事件对象目标中的name和输入框中的值相同
            [e.target.name]: e.target.value
        })
    }

    submitData(e) {
        // 从状态里获取用户名和密码
        const { username, password } = this.state

        // 判断是否输入了用户名和密码
        if (username === '' || password === '') {
            alert('请输入用户名和密码');
            return;
        }
        console.log(username, password)
    }
}
